import { Button, Modal, Steps } from 'antd';
import { useState, useEffect, useContext } from 'react';
import useBusinessMap from '../../../../../../../common/BusinessMap/useBusinessMap';
import zbzPng from '../images/zbz.png'
import { ScaleLine } from 'ol/control';
import 'ol/ol.css'
import ZhpgContext from '../../../ZhpgContext';
import { drawCircle, geomToWkt, navByWkt, wktToGeom } from '../../../../../../../../utils/helper/mapHelper';
import { fromCircle } from 'ol/geom/Polygon';
export default function MapLogic(props) {
    const { mapInfo, step } = props;
    const map = useBusinessMap();

    const { zhData, yxfxData, zhjcData } = useContext(ZhpgContext);

    useEffect(() => {
        console.log('@gbsc\n>',zhData,'\n>',yxfxData,'\n>',zhjcData)
        if (map && zhData) {
            if (step === 1 && yxfxData) { // 影响范围
                const center = wktToGeom(zhData.geom).getCoordinates();
                const circle = drawCircle(map, center, yxfxData.radius);
                const wkt = geomToWkt(fromCircle(circle));
                navByWkt(wkt, map, true);
            } else if (step === 2 && zhjcData) { // 指挥决策-救援专题（救援队）
                const center = wktToGeom(zhData.geom).getCoordinates();
                const circle = drawCircle(map, center, zhjcData.jydw?.radius || 1);
                const wkt = geomToWkt(fromCircle(circle));
                navByWkt(wkt, map, true);
            } else if (step === 3 && zhjcData) { // 指挥决策-撤离专题（应急避难所）
                const center = wktToGeom(zhData.geom).getCoordinates();
                const circle = drawCircle(map, center, zhjcData.bncs?.radius || 1);
                const wkt = geomToWkt(fromCircle(circle));
                navByWkt(wkt, map, true);
            } else if (step === 4 && zhjcData) { // 指挥决策-物资储备专题（救援物质储备库）
                const center = wktToGeom(zhData.geom).getCoordinates();
                const circle = drawCircle(map, center, zhjcData.wzcbd?.radius || 1);
                const wkt = geomToWkt(fromCircle(circle));
                navByWkt(wkt, map, true);
            }
        }
    }, [map, zhData, yxfxData, step, zhjcData])

    useEffect(() => {
        if (map) {
            const scaleLine = new ScaleLine({})
            if (mapInfo.enableScale) {
                map.addControl(scaleLine);
            }
            return () => {
                scaleLine && map.removeControl(scaleLine);
            }
        }
    }, [mapInfo, map])

    return <div>
        {mapInfo?.enableCompass && <img src={zbzPng} style={{
            position: "absolute",
            left: 20,
            top: 20,
            width: 32,
            height: 32,

        }} alt="" />}
    </div>
}